<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>姓名案例-计算属性实现</title>
  <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       姓：<input type="text" v-model="firstName"> <br><br>
       名：<input type="text" v-model="lastName"> <br><br>
       全名：{{fullName}} <br><br>
       全名：{{fullName}} <br><br>
       全名：{{fullName}} <br><br>

    </div>
    <script type='text/javascript'>
        new Vue({
            el:'#root',
            data:{
               firstName:'张',
               lastName:'三'
            },
            // (1)计算属性：将data中的属性进行处理然后放到vm实例中的属性中(但是不属于data中)
            computed:{
                // (2)计算属性为了方便各种处理 需要写成对象形式
                fullName:{
                    // (3)fullName的getter，this指向的就是Vue实例，把这个看成C++中的成员函数
                    /**
                     * (4)get()被调用的时机：
                     *    1.fullName初始化时
                     *      注意：在fullName初始化后，会把数据放在缓存中，下次会从缓存中拿
                     *            这个只有计算属性有，data和methods都没有，这是为了减少重复计算
                     *    2.依赖数据(firstName、lastName)变化时，为了保证是最新数据
                    */
                    get(){
                        console.log('get被读取了');
                        return this.firstName.slice(0,3) + '-' +this.lastName
                    },
                    // (5)setter只有在fullName被修改才被调用,实现把数据源给改了
                    set(value){
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })
    </script>
</body>
</html>